<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">控制台</h1>
      <p class="page-description">欢迎使用智能视频内容结构重构平台</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon total">
              <el-icon><VideoCamera /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ totalTasks }}</div>
              <div class="stat-label">总任务数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon processing">
              <el-icon><Loading /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ processingTasks.length }}</div>
              <div class="stat-label">处理中</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon completed">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ completedTasks.length }}</div>
              <div class="stat-label">已完成</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon failed">
              <el-icon><CircleClose /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ failedTasks.length }}</div>
              <div class="stat-label">失败</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" size="large" @click="goToUpload">
              <el-icon><Upload /></el-icon>
              上传视频
            </el-button>
            <el-button size="large" @click="goToTasks">
              <el-icon><List /></el-icon>
              查看任务
            </el-button>
            <el-button size="large" @click="goToTemplates">
              <el-icon><Grid /></el-icon>
              平台模板
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近任务</span>
              <el-button type="text" @click="goToTasks">查看全部</el-button>
            </div>
          </template>
          <div v-if="recentTasks.length === 0" class="empty-state">
            <el-icon class="empty-icon"><Document /></el-icon>
            <div class="empty-text">暂无任务记录</div>
            <el-button type="primary" @click="goToUpload">立即上传</el-button>
          </div>
          <div v-else class="recent-tasks">
            <div
              v-for="task in recentTasks"
              :key="task.id"
              class="task-item"
              @click="goToTaskDetail(task.id)"
            >
              <div class="task-info">
                <div class="task-title">{{ task.title }}</div>
                <div class="task-meta">
                  <el-tag :type="getStatusType(task.status)" size="small">
                    {{ getStatusText(task.status) }}
                  </el-tag>
                  <span class="task-platform">{{ task.target_platform }}</span>
                </div>
              </div>
              <div class="task-time">
                {{ formatTime(task.created_at) }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 平台模板介绍 -->
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>支持的平台模板</span>
          <el-button type="text" @click="goToTemplates">查看详情</el-button>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6" v-for="template in platformTemplates" :key="template.template_name">
          <div class="template-card">
            <div class="template-icon">
              <el-icon><VideoPlay /></el-icon>
            </div>
            <div class="template-name">{{ template.display_name }}</div>
            <div class="template-desc">{{ template.description }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useVideoStore } from '@/stores/video'
import { ElMessage } from 'element-plus'
import {
  VideoCamera,
  Loading,
  CircleCheck,
  CircleClose,
  Upload,
  List,
  Grid,
  Document,
  VideoPlay
} from '@element-plus/icons-vue'
import type { VideoTask, PlatformTemplate } from '@/types'

const router = useRouter()
const videoStore = useVideoStore()

// 响应式数据
const recentTasks = ref<VideoTask[]>([])
const platformTemplates = ref<PlatformTemplate[]>([
  {
    id: 1,
    platform_name: 'douyin_short',
    template_name: 'douyin_short',
    display_name: '抖音短视频',
    description: '60秒竖版短视频',
    is_active: true
  },
  {
    id: 2,
    platform_name: 'xiaohongshu',
    template_name: 'xiaohongshu',
    display_name: '小红书',
    description: '45秒生活分享',
    is_active: true
  },
  {
    id: 3,
    platform_name: 'bilibili',
    template_name: 'bilibili',
    display_name: 'B站',
    description: '3分钟内容视频',
    is_active: true
  },
  {
    id: 4,
    platform_name: 'weibo_video',
    template_name: 'weibo_video',
    display_name: '微博视频',
    description: '30秒快速分享',
    is_active: true
  }
])

// 计算属性
const totalTasks = computed(() => videoStore.tasks.length)
const processingTasks = computed(() => videoStore.processingTasks)
const completedTasks = computed(() => videoStore.completedTasks)
const failedTasks = computed(() => videoStore.failedTasks)

// 方法
const loadRecentTasks = async () => {
  try {
    await videoStore.fetchTasks({ size: 5 })
    recentTasks.value = videoStore.tasks.slice(0, 5)
  } catch (error) {
    ElMessage.error('加载任务列表失败')
  }
}

const goToUpload = () => {
  router.push('/upload')
}

const goToTasks = () => {
  router.push('/tasks')
}

const goToTemplates = () => {
  router.push('/templates')
}

const goToTaskDetail = (taskId: string) => {
  router.push(`/tasks/${taskId}`)
}

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: 'info',
    processing: 'warning',
    completed: 'success',
    failed: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '等待中',
    processing: '处理中',
    completed: '已完成',
    failed: '失败'
  }
  return statusMap[status] || status
}

const formatTime = (timeStr: string) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  if (diff < 60 * 1000) {
    return '刚刚'
  } else if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`
  } else if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
  } else {
    return date.toLocaleDateString()
  }
}

// 生命周期
onMounted(() => {
  loadRecentTasks()
})
</script>

<style scoped>
.stat-card {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.processing {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.failed {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.task-item:hover {
  background-color: #f5f7fa;
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
  font-weight: 500;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-platform {
  font-size: 12px;
  color: #909399;
}

.task-time {
  font-size: 12px;
  color: #c0c4cc;
}

.template-card {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.template-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
}

.template-icon {
  font-size: 32px;
  color: #409eff;
  margin-bottom: 10px;
}

.template-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.template-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.recent-tasks {
  max-height: 200px;
  overflow-y: auto;
}
</style>